<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../bootstrap/css//bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../lib/swiper-4.2.6.min.css">
    <title>首页</title>
</head>

<body>
    <div class="header">
        <div class="row">
            <nav class="navs">
                <div class="header-img">众酷</div>
                <div class="header-navs">
                    <ul class="navs-ul">
                        <li class="navs-li">
                            <a href="../html/index.html" class="active">首页</a>
                        </li>
                        <li class="navs-li">
                            <a href="../html/case.html">案例</a>
                        </li>
                        <li class="navs-li">
                            <a href="../html/about.html">关于众库</a>
                        </li>
                        <li class="navs-li">
                            <a href="../html/product.html">产品中心</a>
                        </li>
                        <li class="navs-li">
                            <a href="../html/news.html">咨讯中心</a>
                        </li>
                        <li class="navs-li">
                            <a href="../html/contact.html">联系我们</a>
                        </li>
                        <li>
                            <a href="#">众库供应链系统</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="page-home">
        <div class="main">
            <div class="banner" id="inner">
                <ul id="box">
                    <li><a href="#"><img src="../images/index/banner01.jpg" /></a></li>
                    <li><a href="#"><img src="../images/index/banner02.png" /></a></li>
                    <li><a href="#"><img src="../images/index/banner03.jpg" /></a></li>
                </ul>
                <!-- <div class="square">
                    <div class="btn-jian">
                        <label>()</label>
                        <label>></label>
                    </div>
                    <div class="btn-des">国家商务部投资促进事务局与工产业投资促进、深化多边合作</div>
                    <div class="btn-yuan">
                        <span class="current"></span>
                        <span></span>
                        <span></span>
                    </div>
                </div> -->
            </div>
            <div class="square">
                    <div class="btn-jian">
                        <!-- <label id="prev"> << </label>
                        <label id="next">>></label> -->
                    </div>
                    <div class="btn-des">国家商务部投资促进事务局与工产业投资促进、深化多边合作</div>
                    <div class="btn-yuan" id="bt">
                        <span class="current" id="1"></span>
                        <span id="2"></span>
                        <span id="3"></span>
                    </div>
                </div>
            <div class="about">
                <div class="about-box">
                    <div class="about-top">
                        <div class="about-top-l">
                            <span>关于众库供应链</span>
                            <span style="left:175px;"> /ABOUT ZHONGKU SUPPLY</span>
                        </div>
                        <div class="about-top-more">more</div>
                    </div>
                    <div class="about-centent">
                        <div class="about-centent-top">众库供应链管理(上海)有限公司</div>
                        <div class="about-centent-main">
                            <div class="about-main-left">
                                <div class="about-main-left-des">
                                    我们利用互联网五金交易平台建立了由包括消费者、五金生产商、五金经销商等合作伙伴及售后服立了由包括消费者、五金生产商、五金经销商等合作伙伴及售后服立了由包括消费者、五金生产商、五金经销商等合作伙伴及售后服务供货商所共同参与的生态系统，为整个五金交易周期与使用周的交易，提供便利
                                    。
                                </div>
                                <div class="about-main-left-num">
                                    <div class="about-border-right">
                                        <p>2018 <span class="p-span">年</span></p>
                                        <p>众库供应链(上海)成立</p>
                                    </div>
                                    <div class="about-border-right">
                                        <p>36<span class="p-span">+</span></p>
                                        <p>商业共赢伙伴</p>
                                    </div>
                                    <div>
                                        <p>58 <span class="p-span">+</span></p>
                                        <p>成功合作案例</p>
                                    </div>
                                </div>
                            </div>
                            <div class="about-main-right">
                                <img src="../images/index//img.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="service">
                <div class="service-box">
                    <div class="service-top">
                        <div class="about-top">
                            <div class="about-top-l">
                                <span>服务优势</span>
                                <span>/ SERVICE</span>
                            </div>
                            <!-- <div class="about-top-more">more</div> -->
                        </div>
                    </div>
                    <div class="service-centent">
                        <div class="service-div" style="margin-left: 0px;">
                            <div class="service-div-img">
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">计划平台化</p>
                            <div class="service-div-p2">
                                非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                        <div class="service-div">
                            <div class="service-div-img">
                                <!-- <img src="../images/" alt=""> -->
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">订单全程跟踪</p>
                            <div class="service-div-p2">
                                标准件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                        <div class="service-div" style="margin-right: 0px;">
                            <div class="service-div-img">
                                <!-- <img src="../images/" alt=""> -->
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">零库存</p>
                            <div class="service-div-p2">
                                订单一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                        <div class="service-div" style="margin-left: 0px;">
                            <div class="service-div-img">
                                <!-- <img src="../images/" alt=""> -->
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">计划平台化</p>
                            <div class="service-div-p2">
                                非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                        <div class="service-div">
                            <div class="service-div-img">
                                <!-- <img src="../images/" alt=""> -->
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">订单全程跟踪</p>
                            <div class="service-div-p2">
                                标准件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                        <div class="service-div" style="margin-right: 0px;">
                            <div class="service-div-img">
                                <!-- <img src="../images/" alt=""> -->
                                <img src="../images/index/img.png" alt="">
                            </div>
                            <p class="service-div-p1">计划平台化</p>
                            <div class="service-div-p2">
                                非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="new">
                <div class="new-box">
                    <div class="new-top">
                        <div class="about-top">
                            <div class="about-top-l">
                                <span>资讯中心</span>
                                <span>/ NEW</span>
                            </div>
                            <div class="about-top-more">more</div>
                        </div>
                    </div>
                    <div class="new-centent">
                        <div class="new-centent-top">
                            <div>09-08</div>
                            <div>09-08</div>
                            <div>09-08</div>
                        </div>
                        <div class="new-centent-des">
                            <div>
                                <p class="new-centent-p1">非标件一向以增加生产</p>
                                <p class="new-centent-p2">非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....</p>
                            </div>
                            <div>
                                <p class="new-centent-p1">非标件一向以增加生产</p>
                                <p class="new-centent-p2">非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....</p>
                            </div>
                            <div>
                                <p class="new-centent-p1">非标件一向以增加生产</p>
                                <p class="new-centent-p2">非标件一向以增加生产、提高劳动生产率、提高生产的经济性，即以提高人类的利益为目标来.....</p>
                            </div>
                        </div>
                        <div class="new-centent-more">
                            <div>
                                <p class="">more</p>
                            </div>
                            <div>
                                <p class="">more</p>
                            </div>
                            <div>
                                <p class="">more</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contact">
                <div class="contact-box">
                    <div class="contact-top">
                        <div class="about-top">
                            <div class="about-top-l">
                                <span>商务合作</span>
                                <span>/ CONTACT</span>
                            </div>
                            <!-- <div class="about-top-more">more</div> -->
                        </div>
                    </div>
                    <div class="contact-centent">
                        <div class="contact-centent-left">
                            <input type="text" placeholder="公司名称">
                            <input type="text" placeholder="联系人姓名">
                            <input type="text" placeholder="联系人电话">
                            <input type="text" placeholder="我的邮箱">
                            <div class="submit">提交</div>
                        </div>
                        <div class="contact-centent-center">
                            <p>众库供应链管理(上海)有限公司</p>
                            <p>地址：上海市金山区亭卫公路9299弄31号</p>
                            <p>邮编：201505</p>
                            <p>电话：021-67327320 / 57270989</p>
                            <p>邮箱：hr@zc-supply.com</p>
                            <p>官网：www.zc-supply.com</p>
                        </div>
                        <div class="contact-centent-right">
                            <div class="contact-right-img"><img src="../images/index/img.png" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="p">
            <span class="s1"> © 2018-2029 zc-supply.com 版权所有 ICP证：沪B2-20181201 沪公网安备 33010002000099号</span>
            <span class="s2">声明：本网站部分图文来源于网络，如有侵权请联系删除</span>
        </div>
    </footer>
</body>

</html>
<script src="../lib/jquery-3.3.1.js"></script>
<script src="../js/common.js"></script>
<script>
    "use strict"
 	var timer = null;
 	function startMove(obj,target){
 		clearInterval( timer );
 		timer = setInterval(function(){
 			var speed = (target - obj.offsetLeft)/10;
 			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 			if( target == obj.offsetLeft ){
 				clearInterval( timer );
 			}else{
 				obj.style.left = obj.offsetLeft + speed + "px";
 			}
 		},30)
 	} 
    function $(id){
        return document.getElementById(id);
     }
    var _timer = setInterval( autoPlay , 1500 );//控制自动轮播
 	var index = 0;//下标
 	var list = $("box").children;
    var oList = $("bt").children;
    // var prev = $("prev");
    // var next = $("next");

 	function autoPlay(){
 		index ++ ;
 		if( index == list.length ){
 			index = 0;
 		}
 		for( var i = 0 ; i < oList.length ; i++ ){ //先清空
 			oList[i].className = "";
 		}
         //留下当前  根据index
        oList[index].className = "current";
         
 		startMove( $("box") , -index*1440 );
 	}
 	
 	for( let i = 0 ; i < oList.length ; i++ ){
 		oList[i].onmouseover = function(){
 			clearInterval( _timer );
 			index = i-1;
 			autoPlay();
 		}
 		oList[i].onmouseout = function(){
 			_timer = setInterval( autoPlay , 1500 ); 
 		}
     }
     
    // prev.onclick = function() {
    //     clearInterval( _timer );
    //     autoPlay();
    // }
    
    // next.onclick = function() {
    //     clearInterval( _timer );
    //     autoPlay();
    // }
</script>
<!-- <script src="../js/swiper.js"></script> -->
<!-- <script type="text/javascript">
    //鼠标经过按钮 按钮排他
    var box = document.getElementById("box");
    var inner = box.children[0];            //获取box下的第一个元素，也就是banner
    var ul = inner.children[0];             //获取banner下的ul
    // var squareList = inner.children[1];     //获取banner下的第二个元素
    var squareList = box.children[1]; //获取banner下的第二个元素
    var squares = squareList.children[2].children; 
         //获取所有的按钮
    var imgWidth = inner.offsetWidth;

    // 左右按钮
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");

     //设置索引初始值，点击自增或者自减，根据index值来给按钮添加颜色
     var index = 1;
        //左点击事件
        prev.onclick = function(){
        //调用动画函数，传入正的600，为每次的偏移量
            animate(600);
        //设置索引的范围，不能小于1
            if(index==1){
                index=3;
            }else{
                index--;
            }
        //调用添加颜色函数
            // showButton();
        }
        //右点击事件
        next.onclick = function(){
        //调用动画函数，传入负的600，为每次的偏移量
            animate(-600);
        //设置索引的范围，不能超过3   
            if(index==3){
                index=1;
            }else{
                index++;
            }
            // showButton();
        }

    //动画函数，offset参数为偏移量
    function animate(offset){
    //获取现在.inner盒子的位置加上偏移量 赋值 给.inner盒子
        inner.style.left = parseInt(inner.style.left) + offset + "px";
    //判断新的位置，如果小于-3000则变为-600px，如果大于-600则变为-3000px
        if(parseInt(inner.style.left) < -3000){
            inner.style.left = -600 + "px";
        }
        if(parseInt(inner.style.left) > -600){
            inner.style.left = -3000 + "px";
        }
    }    
    //给每个按钮注册鼠标点击事件
    // for(var i = 0; i < squares.length; i++){
    //     squares[i].index = i;           //把索引保存在自定义属性中
    //     squares[i].onclick = function(){    //鼠标经过事件
    //         //排他  干掉所有人 
    //         for(var j = 0; j < squares.length; j++){
    //             squares[j].className = "";
    //         }
    //         //留下我自己
    //         this.className = "current";
    //         //以动画的方式把ul移动到指定的位置
    //         //目标 和当前按钮索引有关，和图片宽度有关 而且是负数
    //         var target = -this.index * imgWidth;    //获取到索引
    //         animate(ul,target);
    //     }
    // }


    // function animate(obj, target) {
    //     clearInterval(obj.timer);
    //     obj.timer = setInterval(function () {
    //         var step = 20;
    //         var step = obj.offsetLeft < target ? step : -step;
    //         if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
    //             obj.style.left = obj.offsetLeft + step + "px";
    //         } else {
    //             obj.style.left = target + "px";
    //             clearInterval(obj.timer);
    //         }
    //     }, 15)
    // }
</script> -->